<template>
  <div class="sdy-register">
    <SdyHeader title="啥都有注册" back></SdyHeader>

    <!-- 步骤条 -->
    <van-steps class='steps' :active="active" active-icon='arrow-down'>
      <van-step>验证手机号</van-step>
      <van-step>接收验证码</van-step>
      <van-step>设置密码</van-step>
      <van-step>注册完成</van-step>
    </van-steps>
    <!-- //每一步的内容 -->
  <div v-if='active === 0' class='step0 step-item'>
    <!-- 表单填写手机号 -->
  <!-- 验证手机是否被注册过 -->
    <van-form class='login-from' @submit="checkPhoneHandler">
      <van-cell-group inset>
        <van-field
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号',pattern:/\d{11}/ }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    
  </div>
    <!-- 验证发送的验证码正确性 -->
    <div v-if='active === 1' class='step1 step-item'>
        <van-form class='login-from' @submit="checkCodeHandler">
      <van-cell-group inset>
        <van-field
          v-model="code"
          center
          clearable
          placeholder="请输入短信验证码"
          :rules="[{ required: true, message:'请填写验证码'}]"
        >
          <template #button>
            <van-button size="small" type="primary" @click='sendCodeHandler'>发送验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>

  <!-- 验证密码是否一致 -->
    <div v-if='active === 2' class='step2 step-item'>
      <!-- 表单填写两次密码 -->
    <van-form class='login-from' @submit="registerHandler">
      <van-cell-group inset>
          <van-field
          v-model="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码',pattern:/\d{6}/ }]"
        />
        <van-field
          v-model="rpassword"
          name="重复密码"
          label="重复密码"
          placeholder="重复密码"
          :rules="[{ required: true, message: '请填写重复密码', }]"
        />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>

  </div>

  <!-- 完成注册 -->
    <div v-if='active === 3' class='ste3 step-item'>
      <van-icon name="smile-o"  class='icon3'/>
    注册成功，可以去登录辣。
    <router-link to='/login'>
    <van-button>去登录</van-button>
    </router-link>
  </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {checkPhoneApi,sendCodeApi,checkCodeApi,registerApi} from '@/api/users'
//导入vant的弹出层
import {Toast,Dialog} from 'vant'
const active = ref<number>(0)

//验证手机号
const phone = ref<string>('')
const checkPhoneHandler = async ()=>{
  const res = await checkPhoneApi(phone.value)

  if(((res as unknown) as {code:string}).code === '200'){
    //继续下一部
    active.value++
    return
  }
    Toast('手机号已被注册')
}

// 发送验证码
const sendCodeHandler = async()=> {
  const res = await sendCodeApi(phone.value)
 
  Dialog({
    title: `验证码为 ： `+res.data
  })
}

//验证验证码
const code = ref<string>('')
const checkCodeHandler =async ()=>{
const res = await checkCodeApi(phone.value,code.value)
//判断结果
if(((res as unknown) as {code:string}).code === '200'){
    active.value++
    return
}
Toast('验证码错误')
}

//采集密码
const password = ref<string>('')
const rpassword = ref<string>('')
//提交方法
const registerHandler = async ()=>{
  if(password.value !== rpassword.value)return Toast({
    message:'两次密码不一致'
  })

   const res  = await registerApi(phone.value,password.value)

  if(((res as unknown) as {code:string}).code === '200'){
    active.value++
    return
}
Toast('注册失败，请重试')




}
</script>

<style scoped lang="scss">
  .sdy-register{
    height: 100%;

    > .step-item{
      width: 80%;
      height: 200px;
      border: 1px solid rgb(233,233,233);
      margin: 0 auto;
      border-radius:10px;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
    }
  > .ste3{
    align-items: center;
    font-size: 22px;
  > .icon3{
    font-size: 50px;
  }
  }
  }
</style>
